<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/form_info.css">
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="designer-container">
            <!-- 左侧添加面板 -->
            <div class="add-panel">
                <div class="panel-title">通用元素</div>
                <div class="element-list">
                    <div class="element-item" @click="addElement('name')">姓名</div>
                    <div class="element-item" @click="addElement('gender')">性别</div>
                    <div class="element-item" @click="addElement('age')">年龄</div>
                    <div class="element-item" @click="addElement('phone')">手机号</div>
                    <div class="element-item" @click="addElement('verify')">验证码</div>
                    <div class="element-item" @click="addElement('city')">城市</div>
                    <div class="element-item" @click="addElement('agreement-checkbox')">隐私协议</div>
                    <div class="element-item" @click="addElement('button')">按钮</div>
                </div>
                <div class="panel-title">拓展元素</div>
                <div class="element-list">
                    <div class="element-item" @click="addElement('text')">文本框</div>
                    <div class="element-item" @click="addElement('select')">下拉框</div>
                    <div class="element-item" @click="addElement('radio')">单选框</div>
                    <div class="element-item" @click="addElement('checkbox')">多选框</div>
                </div>
            </div>

            <!-- 中间预览区域 -->
            <div class="preview-panel">
                <div class="preview-container">
                    <!-- 头部图片 -->
                    <div class="header-image">
                        <img v-if="globalSettings.headerImage" :src="globalSettings.headerImage" alt="头部图片">
                        <div v-else class="image-preview">
                            <div class="image-placeholder">头部图片区域</div>
                        </div>
                    </div>

                    <div class="form-body" :style="{
                        padding: formSettings.padding + 'px',
                        backgroundColor: formSettings.backgroundColor,
                        borderRadius: formSettings.borderRadius + 'px'
                    }">
                        <div class="form-element" v-for="(element, index) in formElements" :key="element.id"
                            draggable="true" @dragstart="handleDragStart($event, index)"
                            @dragover.prevent="handleDragOver($event, index)" @dragenter.prevent
                            @drop="handleDrop($event, index)" @dragend="handleDragEnd"
                            :class="{'dragging': draggingIndex === index}">
                            <!-- 文本框 -->
                            <div class="form-group" v-if="element.type === 'text'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '文本框' }}
                                </label>
                                <input type="text" class="form-input" :style="{
                                    backgroundColor: formSettings.inputBgColor,
                                    borderColor: formSettings.inputBorderColor,
                                    borderRadius: formSettings.inputBorderRadius + 'px'
                                }" :placeholder="element.settings.placeholder || '请输入内容'">
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 姓名输入框 -->
                            <div class="form-group" v-if="element.type === 'name'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '您的姓名(已安全加密)' }}
                                </label>
                                <input type="text" class="form-input" :style="{
                                    backgroundColor: formSettings.inputBgColor,
                                    borderColor: formSettings.inputBorderColor,
                                    borderRadius: formSettings.inputBorderRadius + 'px'
                                }" :placeholder="element.settings.placeholder || '请输入您的姓名'">
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 年龄输入框 -->
                            <div class="form-group" v-if="element.type === 'age'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '您的年龄' }}
                                </label>
                                <input type="number" class="form-input" :style="{
                                    backgroundColor: formSettings.inputBgColor,
                                    borderColor: formSettings.inputBorderColor,
                                    borderRadius: formSettings.inputBorderRadius + 'px'
                                }" :placeholder="element.settings.placeholder || '请输入您的年龄'" :min="element.settings.min"
                                    :max="element.settings.max">
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 手机号输入框 -->
                            <div class="form-group" v-if="element.type === 'phone'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '您的手机号(已安全加密)' }}
                                </label>
                                <input type="tel" class="form-input" :style="{
                                    backgroundColor: formSettings.inputBgColor,
                                    borderColor: formSettings.inputBorderColor,
                                    borderRadius: formSettings.inputBorderRadius + 'px'
                                }" :placeholder="element.settings.placeholder || '请输入手机号'">
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 验证码 -->
                            <div class="form-group" v-if="element.type === 'verify'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '您的手机号(已安全加密)' }}
                                </label>
                                <div class="verify-code-group">
                                    <input type="tel" class="form-input verify-code-input" :style="{
                                        backgroundColor: formSettings.inputBgColor,
                                        borderColor: formSettings.inputBorderColor,
                                        borderRadius: formSettings.inputBorderRadius + 'px'
                                    }" :placeholder="element.settings.placeholder || '请输入手机号'">
                                    <button class="verify-code-btn" :style="{
                                        backgroundColor: element.settings.buttonColor || '#1890ff',
                                        color: element.settings.buttonTextColor || 'white',
                                        borderRadius: element.settings.buttonBorderRadius + 'px'
                                    }">
                                        {{ element.settings.buttonText || '获取验证码' }}
                                    </button>
                                </div>
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 下拉框 -->
                            <div class="form-group" v-if="element.type === 'select'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '下拉选择' }}
                                </label>
                                <select class="form-input" :style="{
                                    backgroundColor: formSettings.inputBgColor,
                                    borderColor: formSettings.inputBorderColor,
                                    borderRadius: formSettings.inputBorderRadius + 'px'
                                }" v-model="element.settings.defaultValue">
                                    <option value="" disabled selected>{{ element.settings.placeholder || '请选择' }}
                                    </option>
                                    <option v-for="(option, i) in element.settings.options" :key="i"
                                        :value="option.value">
                                        {{ option.label }}
                                    </option>
                                </select>
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 城市选择 -->
                            <div class="form-group" v-if="element.type === 'city'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '工作所在地' }}
                                </label>
                                <select class="form-input" :style="{
                                    backgroundColor: formSettings.inputBgColor,
                                    borderColor: formSettings.inputBorderColor,
                                    borderRadius: formSettings.inputBorderRadius + 'px'
                                }" v-model="element.settings.defaultValue">
                                    <option value="" disabled selected>{{ element.settings.placeholder || '请选择城市' }}
                                    </option>
                                    <option v-for="(option, i) in element.settings.options" :key="i"
                                        :value="option.value">
                                        {{ option.label }}
                                    </option>
                                </select>
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 单选框 -->
                            <div class="form-group" v-if="element.type === 'radio'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '单选选项' }}
                                </label>
                                <div class="radio-group">
                                    <div class="radio-option" v-for="(option, i) in element.settings.options" :key="i"
                                        :class="{
                                                selected: element.settings.mode === 'single-field' ? 
                                                    element.settings.selectedValue === option.value : 
                                                    element.settings[option.fieldName]
                                            }" @click="toggleRadioValue(element, option)" :style="{
                                                backgroundColor: (element.settings.mode === 'single-field' ? 
                                                    element.settings.selectedValue === option.value : 
                                                    element.settings[option.fieldName]) ? 
                                                    element.settings.selectedColor : element.settings.unselectedColor,
                                                borderColor: (element.settings.mode === 'single-field' ? 
                                                    element.settings.selectedValue === option.value : 
                                                    element.settings[option.fieldName]) ? 
                                                    element.settings.selectedBorderColor : element.settings.unselectedBorderColor
                                            }">
                                        {{ option.label }}
                                    </div>
                                </div>
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 性别选择 -->
                            <div class="form-group" v-if="element.type === 'gender'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '性别' }}
                                </label>
                                <div class="gender-select">
                                    <div class="gender-option" :class="{selected: formData.gender === 'male'}"
                                        @click="formData.gender = 'male'" :style="{
                                            backgroundColor: formData.gender === 'male' ? element.settings.selectedColor : element.settings.unselectedColor,
                                            borderColor: formData.gender === 'male' ? element.settings.selectedBorderColor : element.settings.unselectedBorderColor
                                        }">男</div>
                                    <div class="gender-option" :class="{selected: formData.gender === 'female'}"
                                        @click="formData.gender = 'female'" :style="{
                                            backgroundColor: formData.gender === 'female' ? element.settings.selectedColor : element.settings.unselectedColor,
                                            borderColor: formData.gender === 'female' ? element.settings.selectedBorderColor : element.settings.unselectedBorderColor
                                        }">女</div>
                                </div>
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 多选框 -->
                            <div class="form-group" v-if="element.type === 'checkbox'">
                                <label class="form-label" :style="{color: formSettings.labelColor}">
                                    {{ element.settings.label || '多选选项' }}
                                </label>
                                <div class="checkbox-group">
                                    <div class="checkbox-option" v-for="(option, i) in element.settings.options"
                                        :key="i" :class="{
                                            selected: element.settings.mode === 'single-field' ? 
                                                element.settings.selectedValues.includes(option.value) : 
                                                element.settings[option.fieldName]
                                        }" @click="toggleCheckboxValue(element, option)" :style="{
                                            backgroundColor: (element.settings.mode === 'single-field' ? 
                                                element.settings.selectedValues.includes(option.value) : 
                                                element.settings[option.fieldName]) ? 
                                                element.settings.selectedColor : element.settings.unselectedColor,
                                            borderColor: (element.settings.mode === 'single-field' ? 
                                                element.settings.selectedValues.includes(option.value) : 
                                                element.settings[option.fieldName]) ? 
                                                element.settings.selectedBorderColor : element.settings.unselectedBorderColor
                                        }">
                                        {{ option.label }}
                                    </div>
                                </div>
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>


                            <!-- 隐私协议（带勾选框） -->
                            <div class="form-group" v-if="element.type === 'agreement-checkbox'">
                                <div class="agreement with-checkbox"
                                    :style="{color: element.settings.textColor || '#666'}"> <!-- 改为 element -->
                                    <input type="checkbox">
                                    <span>{{ element.settings.text || '我已表示阅读并同意《用户服务及隐私协议》' }}</span>
                                </div>
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>

                            <!-- 提交按钮 -->
                            <div class="form-group" v-if="element.type === 'button'">
                                <button class="submit-btn" :style="{
                                    backgroundColor: element.settings.buttonColor || '#1890ff',
                                    color: element.settings.buttonTextColor || 'white',
                                    borderRadius: element.settings.buttonBorderRadius + 'px'
                                }">
                                    {{ element.settings.buttonText || '测测你能借多少' }}
                                </button>
                                <div class="element-actions">
                                    <span class="element-action" @click="moveElement(index)">移动</span>
                                    <span class="element-action" @click="editElement(element)">编辑</span>
                                    <span class="element-action" @click="removeElement(index)">删除</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 底部图片 -->
                    <div class="footer-image">
                        <img v-if="globalSettings.footerImage" :src="globalSettings.footerImage" alt="底部图片">
                        <div v-else class="image-preview">
                            <div class="image-placeholder">底部图片区域</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧设置面板 -->
            <div class="settings-panel">
                <!-- 全局设置 -->
                <div class="settings-section">
                    <div class="panel-title" @click="toggleSection('global')">
                        页面全局设置
                        <span class="panel-toggle">{{ sections.global.collapsed ? '展开' : '折叠' }}</span>
                    </div>
                    <div class="settings-content" :class="{collapsed: sections.global.collapsed}">
                        <div class="setting-item">
                            <label class="setting-label">页面标题</label>
                            <input type="text" class="form-input" v-model="globalSettings.pageTitle"
                                placeholder="请输入页面标题">
                        </div>
                        <div class="setting-item">
                            <label class="setting-label">页面说明</label>
                            <input type="text" class="form-input" v-model="globalSettings.pageNotes"
                                placeholder="请输入页面说明">
                        </div>
                        <div class="setting-item">
                            <label class="setting-label">头部图片</label>
                            <div class="image-upload">
                                <div class="image-preview">
                                    <img v-if="globalSettings.headerImage" :src="globalSettings.headerImage">
                                    <div v-else class="image-placeholder">点击上传头部图片</div>
                                </div>
                                <input type="file" @change="handleHeaderImageChange">
                            </div>
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">底部图片</label>
                            <div class="image-upload">
                                <div class="image-preview">
                                    <img v-if="globalSettings.footerImage" :src="globalSettings.footerImage">
                                    <div v-else class="image-placeholder">点击上传底部图片</div>
                                </div>
                                <input type="file" @change="handleFooterImageChange">
                            </div>
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">背景颜色</label>
                            <div class="color-picker">
                                <input type="text" class="form-input" v-model="globalSettings.backgroundColor">
                                <input type="color" v-model="globalSettings.backgroundColor">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 表单部分设置 -->
                <div class="settings-section">
                    <div class="panel-title" @click="toggleSection('form')">
                        表单部分设置
                        <span class="panel-toggle">{{ sections.form.collapsed ? '展开' : '折叠' }}</span>
                    </div>
                    <div class="settings-content" :class="{collapsed: sections.form.collapsed}">
                        <div class="setting-item">
                            <label class="setting-label">背景颜色</label>
                            <div class="color-picker">
                                <input type="text" class="form-input" v-model="formSettings.backgroundColor">
                                <input type="color" v-model="formSettings.backgroundColor">
                            </div>
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">边距</label>
                            <input type="number" class="form-input" v-model="formSettings.padding" placeholder="请输入边距值">
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">边框圆角</label>
                            <input type="number" class="form-input" v-model="formSettings.borderRadius"
                                placeholder="请输入圆角值">
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">标签颜色</label>
                            <div class="color-picker">
                                <input type="text" class="form-input" v-model="formSettings.labelColor">
                                <input type="color" v-model="formSettings.labelColor">
                            </div>
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">输入框背景颜色</label>
                            <div class="color-picker">
                                <input type="text" class="form-input" v-model="formSettings.inputBgColor">
                                <input type="color" v-model="formSettings.inputBgColor">
                            </div>
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">输入框边框颜色</label>
                            <div class="color-picker">
                                <input type="text" class="form-input" v-model="formSettings.inputBorderColor">
                                <input type="color" v-model="formSettings.inputBorderColor">
                            </div>
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">输入框边框圆角</label>
                            <input type="number" class="form-input" v-model="formSettings.inputBorderRadius"
                                placeholder="请输入圆角值">
                        </div>
                    </div>
                </div>

                <!-- 当前选中元素设置 -->
                <template v-if="currentElement">
                    <div class="settings-section">
                        <div class="panel-title" @click="toggleSection('element')">
                            {{ getElementName(currentElement.type) }}设置
                            <span class="panel-toggle">{{ sections.element.collapsed ? '展开' : '折叠' }}</span>
                        </div>
                        <div class="settings-content" :class="{collapsed: sections.element.collapsed}">
                            <!-- 通用设置 -->
                            <div class="setting-item"
                                v-if="['text', 'select', 'radio', 'checkbox','agreement-checkbox'].includes(currentElement.type)">
                                <label class="setting-label">字段名</label>
                                <input type="text" class="form-input" v-model="currentElement.settings.fieldName"
                                    placeholder="请输入字段名">
                            </div>

                            <div class="setting-item"
                                v-if="['text', 'name', 'age', 'phone', 'verify', 'select', 'city', 'radio', 'gender', 'checkbox'].includes(currentElement.type)">
                                <label class="setting-label">标签文本</label>
                                <input type="text" class="form-input" v-model="currentElement.settings.label"
                                    placeholder="请输入标签文本">
                            </div>

                            <div class="setting-item"
                                v-if="['text', 'name', 'age', 'phone', 'verify','select', 'city'].includes(currentElement.type)">
                                <label class="setting-label">提示文本</label>
                                <input type="text" class="form-input" v-model="currentElement.settings.placeholder"
                                    placeholder="请输入提示文本">
                            </div>

                            <!-- 年龄设置 -->
                            <div class="setting-item" v-if="currentElement.type === 'age'">
                                <label class="setting-label">最小值</label>
                                <input type="number" class="form-input" v-model="currentElement.settings.min"
                                    placeholder="请输入最小值">
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'age'">
                                <label class="setting-label">最大值</label>
                                <input type="number" class="form-input" v-model="currentElement.settings.max"
                                    placeholder="请输入最大值">
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'verify'">
                                <label class="setting-label">按钮颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input" v-model="currentElement.settings.buttonColor">
                                    <input type="color" v-model="currentElement.settings.buttonColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'verify'">
                                <label class="setting-label">按钮文本颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.buttonTextColor">
                                    <input type="color" v-model="currentElement.settings.buttonTextColor">
                                </div>
                            </div>

                            <!-- 下拉选择设置 -->
                            <div class="setting-item" v-if="['select', 'city'].includes(currentElement.type)">
                                <label class="setting-label">默认值</label>
                                <select class="form-input" v-model="currentElement.settings.defaultValue">
                                    <option value="">-- 请选择 --</option>
                                    <option v-for="(option, i) in currentElement.settings.options" :key="i"
                                        :value="option.value">
                                        {{ option.label }}
                                    </option>
                                </select>
                            </div>

                            <div class="setting-item" v-if="['select', 'city'].includes(currentElement.type)">
                                <label class="setting-label">选项设置</label>
                                <textarea class="form-input" v-model="currentElement.settings.optionsText"
                                    placeholder="每行一个选项，格式：显示文本|值" rows="5"
                                    @change="updateOptions(currentElement)"></textarea>
                            </div>

                            <!-- 单选框设置 -->
                            <div class="setting-item" v-if="currentElement.type === 'radio'">
                                <label class="setting-label">默认选中值</label>
                                <select class="form-input" v-model="currentElement.settings.selectedValue">
                                    <option value="">-- 请选择 --</option>
                                    <option v-for="(option, i) in currentElement.settings.options" :key="i"
                                        :value="option.value">
                                        {{ option.label }}
                                    </option>
                                </select>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'radio'">
                                <label class="setting-label">选项设置</label>
                                <textarea class="form-input" v-model="currentElement.settings.optionsText"
                                    placeholder="每行一个选项，格式：显示文本|值" rows="5"
                                    @change="updateOptions(currentElement)"></textarea>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'radio'">
                                <label class="setting-label">选中背景颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.selectedColor">
                                    <input type="color" v-model="currentElement.settings.selectedColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'radio'">
                                <label class="setting-label">未选中背景颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.unselectedColor">
                                    <input type="color" v-model="currentElement.settings.unselectedColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'radio'">
                                <label class="setting-label">选中边框颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.selectedBorderColor">
                                    <input type="color" v-model="currentElement.settings.selectedBorderColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'radio'">
                                <label class="setting-label">未选中边框颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.unselectedBorderColor">
                                    <input type="color" v-model="currentElement.settings.unselectedBorderColor">
                                </div>
                            </div>

                            <!-- 性别选择设置 -->
                            <div class="setting-item" v-if="currentElement.type === 'gender'">
                                <label class="setting-label">选中背景颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.selectedColor">
                                    <input type="color" v-model="currentElement.settings.selectedColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'gender'">
                                <label class="setting-label">未选中背景颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.unselectedColor">
                                    <input type="color" v-model="currentElement.settings.unselectedColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'gender'">
                                <label class="setting-label">选中边框颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.selectedBorderColor">
                                    <input type="color" v-model="currentElement.settings.selectedBorderColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'gender'">
                                <label class="setting-label">未选中边框颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.unselectedBorderColor">
                                    <input type="color" v-model="currentElement.settings.unselectedBorderColor">
                                </div>
                            </div>

                            <!-- 多选框设置 -->
                            <div class="setting-item" v-if="currentElement.type === 'checkbox'">
                                <label class="setting-label">选择模式</label>
                                <select class="form-input" v-model="currentElement.settings.mode">
                                    <option value="single-field">一个字段多选</option>
                                    <option value="multi-field">多个字段单选</option>
                                </select>
                            </div>

                            <!-- <div class="setting-item"
                                v-if="currentElement.type === 'checkbox' || currentElement.settings.mode === 'single-field'">
                                <label class="setting-label">默认选中值</label>
                                <input type="text" class="form-input"
                                    v-model="currentElement.settings.selectedValuesText" placeholder="多个值用逗号分隔"
                                    @change="updateSelectedValues(currentElement)">
                            </div> -->

                            <div class="setting-item" v-if="currentElement.type === 'checkbox'">
                                <label class="setting-label">选项设置</label>
                                <textarea class="form-input" v-model="currentElement.settings.optionsText" :placeholder="currentElement.settings.mode === 'single-field' ? 
                                        '每行一个选项，格式：显示文本|值' : 
                                        '每行一个选项，格式：显示文本|值|字段名(多字段模式需要)'" rows="5"
                                    @change="updateOptions(currentElement)"></textarea>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'checkbox'">
                                <label class="setting-label">选中背景颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.selectedColor">
                                    <input type="color" v-model="currentElement.settings.selectedColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'checkbox'">
                                <label class="setting-label">未选中背景颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.unselectedColor">
                                    <input type="color" v-model="currentElement.settings.unselectedColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'checkbox'">
                                <label class="setting-label">选中边框颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.selectedBorderColor">
                                    <input type="color" v-model="currentElement.settings.selectedBorderColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'checkbox'">
                                <label class="setting-label">未选中边框颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.unselectedBorderColor">
                                    <input type="color" v-model="currentElement.settings.unselectedBorderColor">
                                </div>
                            </div>

                            <!-- 隐私协议设置 -->
                            <div class="setting-item" v-if="currentElement.type === 'agreement-checkbox'">
                                <label class="setting-label">协议文本</label>
                                <textarea class="form-input" v-model="currentElement.settings.text"
                                    placeholder="请输入协议文本" rows="3"></textarea>
                            </div>
                            <div class="setting-item" v-if="currentElement.type === 'agreement-checkbox'">
                                <label class="setting-label">文本颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input" v-model="currentElement.settings.textColor">
                                    <input type="color" v-model="currentElement.settings.textColor">
                                </div>
                            </div>
                            <!-- 按钮设置 -->
                            <div class="setting-item" v-if="currentElement.type === 'button'">
                                <label class="setting-label">按钮文本</label>
                                <input type="text" class="form-input" v-model="currentElement.settings.buttonText"
                                    placeholder="请输入按钮文本">
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'button'">
                                <label class="setting-label">按钮颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input" v-model="currentElement.settings.buttonColor">
                                    <input type="color" v-model="currentElement.settings.buttonColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'button'">
                                <label class="setting-label">文本颜色</label>
                                <div class="color-picker">
                                    <input type="text" class="form-input"
                                        v-model="currentElement.settings.buttonTextColor">
                                    <input type="color" v-model="currentElement.settings.buttonTextColor">
                                </div>
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'verify'">
                                <label class="setting-label">按钮圆角</label>
                                <input type="number" class="form-input"
                                    v-model="currentElement.settings.buttonBorderRadius" placeholder="请输入圆角值">
                            </div>

                            <div class="setting-item" v-if="currentElement.type === 'button'">
                                <label class="setting-label">边框圆角</label>
                                <input type="number" class="form-input"
                                    v-model="currentElement.settings.buttonBorderRadius" placeholder="请输入圆角值">
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="layui-form-item fix_bottom">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary close_goback">关闭</button>
                <button class="layui-btn layui-btn-normal" type="button" @click="sendForm">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟页面数据
        let formDetail = { "globalSettings": { "pageTitle": "test", "pageNotes": "", "backgroundColor": "#1890ff", "headerImage": "https://www.candyblog.cn/wp-content/uploads/2025/07/1753769329-0395724001695177085-219x300.jpg", "footerImage": "https://www.candyblog.cn/wp-content/uploads/2025/07/1753769367-0309919001695177095-300x48.jpg" }, "formSettings": { "backgroundColor": "#ffffff", "padding": 20, "borderRadius": 0, "labelColor": "#666", "inputBgColor": "#fffafa", "inputBorderColor": "#ffe0e0", "inputBorderRadius": "0" }, "formElements": [{ "id": 1, "type": "name", "settings": { "fieldName": "name", "label": " ", "placeholder": "请输入您的姓名", "validation": { "required": true, "pattern": {}, "message": "请输入2-6个汉字" } } }, { "id": 2, "type": "gender", "settings": { "fieldName": "sex", "label": " ", "selectedColor": "#62cdfe", "unselectedColor": "#ffffff", "selectedBorderColor": "#000000", "unselectedBorderColor": "#fbdada", "validation": { "required": true, "message": "请选择性别" } } }, { "id": 3, "type": "phone", "settings": { "fieldName": "mobile", "label": " ", "placeholder": "请输入手机号", "validation": { "required": true, "pattern": {}, "message": "请输入有效的手机号" } } }, { "id": 8, "type": "select", "settings": { "fieldName": "amount", "label": " ", "placeholder": "请选择金额", "defaultValue": "", "optionsText": "1000|1000\n3000|2000\n3000|3000", "options": [{ "label": "1000", "value": "1000" }, { "label": "3000", "value": "2000" }, { "label": "3000", "value": "3000" }], "validation": { "required": true, "message": "请选择一个选项" }, "selectedValues": [] } }, { "id": 4, "type": "verify", "settings": { "fieldName": "code", "label": " ", "placeholder": "请输入验证码", "buttonText": "获取验证码", "buttonColor": "#1890ff", "buttonTextColor": "#ffffff", "buttonBorderRadius": 4, "validation": { "required": true, "pattern": {}, "message": "请输入4-6位数字验证码" } } }, { "id": 6, "type": "age", "settings": { "fieldName": "age", "label": " ", "placeholder": "请输入您的年龄", "min": 18, "max": 70, "validation": { "required": true, "pattern": {}, "message": "请输入有效的年龄" } } }, { "id": 5, "type": "city", "settings": { "fieldName": "city", "label": " ", "placeholder": "请选择城市", "defaultValue": "", "optionsText": "上海|上海\n杭州|杭州\n武汉|武汉\n北京|北京", "options": [{ "label": "上海", "value": "上海" }, { "label": "杭州", "value": "杭州" }, { "label": "武汉", "value": "武汉" }, { "label": "北京", "value": "北京" }], "validation": { "required": true, "message": "请选择一个城市" }, "selectedValues": [] } }, { "id": 1, "type": "checkbox", "settings": { "fieldName": "checkbox_2", "label": "资质选择", "mode": "multi-field", "selectedValuesText": "", "selectedValues": [], "optionsText": "有车|0|car\n有房|0|house\n有公积金|0|gjj", "options": [{ "label": "有车", "value": "0", "fieldName": "car" }, { "label": "有房", "value": "0", "fieldName": "house" }, { "label": "有公积金", "value": "0", "fieldName": "gjj" }], "selectedColor": "#e6f7ff", "unselectedColor": "#ffffff", "selectedBorderColor": "#1890ff", "unselectedBorderColor": "#d9d9d9", "car": false, "house": false, "gjj": false } }, { "id": 1, "type": "agreement-checkbox", "settings": { "fieldName": "agreement", "text": "我已表示阅读并同意《用户服务及隐私协议》", "textColor": "#666", "validation": { "required": true, "message": "请阅读用户协议" } } }, { "id": 13, "type": "button", "settings": { "buttonText": "测测你能借多少", "buttonColor": "#1890ff", "buttonTextColor": "#ffffff", "buttonBorderRadius": 4 } }] };

        new Vue({
            el: '#app',
            data: {
                formElements: [], // 存储表单元素的数组
                globalSettings: { // 全局设置
                    pageTitle: '', // 页面标题
                    pageNotes: '', // 页面说明
                    backgroundColor: '#1890ff', // 背景颜色
                    headerImage: '', // 头部图片URL
                    footerImage: '' // 底部图片URL
                },
                formSettings: { // 表单样式设置
                    backgroundColor: '#ffffff', // 表单背景色
                    padding: 20, // 内边距
                    borderRadius: 0, // 边框圆角
                    labelColor: '#666', // 标签颜色
                    inputBgColor: '#f8f8f8', // 输入框背景色
                    inputBorderColor: '#d9d9d9', // 输入框边框颜色
                    inputBorderRadius: 4 // 输入框圆角
                },
                formData: { // 表单数据
                    gender: 'male' // 性别默认值
                },
                draggingIndex: null, // 当前拖拽元素的索引
                currentElement: null, // 当前选中的表单元素
                nextId: 1, // 下一个元素的ID
                sections: { // 设置面板的折叠状态
                    global: { collapsed: true },
                    form: { collapsed: true },
                    element: { collapsed: false }
                }
            },
            // 切换模式时的处理
            watch: {
                'currentElement.settings.mode': function (newVal, oldVal) {
                    if (this.currentElement && this.currentElement.type === 'checkbox') {
                        if (newVal === 'single-field') {
                            // 切换到一个字段模式时，移除字段名部分
                            this.currentElement.settings.optionsText = this.currentElement.settings.options
                                .map(opt => `${opt.label}|${opt.value}`)
                                .join('\n');
                        } else {
                            // 切换到多字段模式时，添加字段名部分
                            this.currentElement.settings.optionsText = this.currentElement.settings.options
                                .map(opt => `${opt.label}|${opt.value}|${opt.fieldName || '字段名'}`)
                                .join('\n');
                        }
                        this.updateOptions(this.currentElement);
                    }
                }
            },
            methods: {
                // 提交表单
                sendForm() {
                    let _this = this,
                        formData = {
                            globalSettings: _this.globalSettings,
                            formSettings: _this.formSettings,
                            formElements: _this.formElements
                        },
                        data = {

                            h5_id: 1,
                            h5_name: _this.globalSettings.pageTitle,
                            h5_notes: _this.globalSettings.pageNotes,
                            template_id: 1,
                            header: _this.globalSettings.headerImage,
                            footer: _this.globalSettings.footerImage,
                            extend: JSON.stringify(formData)
                        };

                    $.ajax({
                        method: 'POST',
                        url: '',
                        data: data,
                        success: function (data) {
                            if (data.status) {
                                layer.msg(data.msg || data.info)
                                setTimeout(function () {
                                    parent.location.reload();
                                }, 2000)
                            } else {
                                layer.msg(data.msg || data.info)
                            }

                        }
                    }, 'json')

                },

                /**
                 * 根据元素类型获取中文名称
                 * @param {string} type - 元素类型
                 * @return {string} 元素的中文名称
                 */
                getElementName(type) {
                    const names = {
                        'text': '文本框',
                        'name': '姓名',
                        'age': '年龄',
                        'phone': '手机号',
                        'verify': '验证码',
                        'select': '下拉框',
                        'city': '城市',
                        'radio': '单选框',
                        'gender': '性别',
                        'checkbox': '多选框',
                        'agreement-checkbox': '隐私协议',
                        'button': '按钮'
                    };
                    return names[type] || type;
                },

                /**
                 * 添加新的表单元素
                 * @param {string} type - 要添加的元素类型
                 */
                addElement(type) {
                    const newElement = {
                        id: this.nextId++, // 分配唯一ID
                        type: type, // 元素类型
                        settings: {
                            fieldName: type + '_' + this.nextId // 默认字段名
                        } // 元素设置
                    };


                    if (type === 'radio') {
                        newElement.settings = {
                            fieldName: 'radio_' + this.nextId,
                            label: '单选选项',
                            mode: 'single-field', // 默认一个字段单选模式
                            selectedValue: '',
                            optionsText: '选项1|value1|field1\n选项2|value2|field2\n选项3|value3|field3',
                            options: [
                                { label: '选项1', value: 'value1', fieldName: 'field1' },
                                { label: '选项2', value: 'value2', fieldName: 'field2' },
                                { label: '选项3', value: 'value3', fieldName: 'field3' }
                            ],
                            selectedColor: '#e6f7ff',
                            unselectedColor: '#ffffff',
                            selectedBorderColor: '#1890ff',
                            unselectedBorderColor: '#d9d9d9',
                            validation: {
                                required: true,
                                message: '请选择一个选项'
                            }
                        };
                        // 初始化多字段模式的字段值
                        newElement.settings.options.forEach(option => {
                            newElement.settings[option.fieldName] = false;
                        });
                    }

                    // 根据不同类型设置默认值和验证规则
                    switch (type) {
                        case 'text':
                            newElement.settings = {
                                fieldName: 'text_' + this.nextId,
                                label: '文本框',
                                placeholder: '请输入内容',
                                validation: {  // 添加验证规则
                                    required: true,
                                    pattern: '',  // 默认空，用户可自定义
                                    message: '请输入有效内容'
                                }
                            };
                            break;
                        case 'name':
                            newElement.settings = {
                                fieldName: 'name',
                                label: '您的姓名(已安全加密)',
                                placeholder: '请输入您的姓名',
                                validation: {  // 姓名验证规则
                                    required: true,
                                    pattern: /^[\u4e00-\u9fa5]{2,6}$/,  // 仅中文，2-6个字符
                                    message: '请输入2-6个汉字'
                                }
                            };
                            break;
                        case 'age':
                            newElement.settings = {
                                fieldName: 'age',
                                label: '您的年龄',
                                placeholder: '请输入您的年龄',
                                min: 18,
                                max: 70,
                                validation: {  // 年龄验证规则
                                    required: true,
                                    pattern: /^[1-9]\d*$/,  // 正整数
                                    message: '请输入有效的年龄'
                                }
                            };
                            break;
                        case 'phone':
                            newElement.settings = {
                                fieldName: 'mobile',
                                label: '您的手机号(已安全加密)',
                                placeholder: '请输入手机号',
                                validation: {  // 手机号验证规则
                                    required: true,
                                    pattern: /^1[3-9]\d{9}$/,  // 中国大陆手机号
                                    message: '请输入有效的手机号'
                                }
                            };
                            break;
                        case 'verify':
                            newElement.settings = {
                                fieldName: 'code',
                                label: '验证码',
                                placeholder: '请输入验证码',
                                buttonText: '获取验证码',
                                buttonColor: '#1890ff',
                                buttonTextColor: '#ffffff',
                                buttonBorderRadius: 4,
                                validation: {  // 验证码验证规则
                                    required: true,
                                    pattern: /^\d{4,6}$/,  // 4-6位数字
                                    message: '请输入4-6位数字验证码'
                                }
                            };
                            break;
                        case 'select':
                            newElement.settings = {
                                fieldName: 'select_' + this.nextId,
                                label: '下拉选择',
                                placeholder: '请选择',
                                defaultValue: '',
                                optionsText: '选项1|value1\n选项2|value2\n选项3|value3',
                                options: [
                                    { label: '选项1', value: 'value1' },
                                    { label: '选项2', value: 'value2' },
                                    { label: '选项3', value: 'value3' }
                                ],
                                validation: {  // 下拉框验证规则
                                    required: true,
                                    message: '请选择一个选项'
                                }
                            };
                            break;
                        case 'city':
                            newElement.settings = {
                                fieldName: 'city',
                                label: '工作所在地',
                                placeholder: '请选择城市',
                                defaultValue: '',
                                optionsText: '上海|上海\n杭州|杭州\n武汉|武汉\n深圳|深圳\n北京|北京',
                                options: [
                                    { label: '上海', value: '上海' },
                                    { label: '杭州', value: '杭州' },
                                    { label: '武汉', value: '武汉' },
                                    { label: '深圳', value: '深圳' },
                                    { label: '北京', value: '北京' },
                                ],
                                validation: {  // 城市验证规则
                                    required: true,
                                    message: '请选择一个城市'
                                }
                            };
                            break;
                        case 'radio':
                            newElement.settings = {
                                fieldName: 'radio_' + this.nextId,
                                label: '单选选项',
                                mode: 'single-field', // 默认一个字段单选模式
                                selectedValue: '',
                                optionsText: '',
                                options: [],
                                selectedColor: '#e6f7ff',
                                unselectedColor: '#ffffff',
                                selectedBorderColor: '#1890ff',
                                unselectedBorderColor: '#d9d9d9'
                            };
                            // 初始化多字段模式的字段值
                            newElement.settings.options.forEach(option => {
                                newElement.settings[option.fieldName] = false;
                            });
                            break;
                        case 'gender':
                            newElement.settings = {
                                fieldName: 'sex',
                                label: '性别',
                                selectedColor: '#e6f7ff',
                                unselectedColor: '#ffffff',
                                selectedBorderColor: '#1890ff',
                                unselectedBorderColor: '#d9d9d9',
                                validation: {  // 性别验证规则
                                    required: true,
                                    message: '请选择性别'
                                }
                            };
                            break;
                        case 'checkbox':
                            newElement.settings = {
                                fieldName: 'checkbox_' + this.nextId,
                                label: '多选选项',
                                mode: 'single-field', // 默认一个字段多选模式
                                selectedValuesText: '', // 默认选中值示例
                                selectedValues: [], // 同步的选中值数组
                                optionsText: '',
                                options: [],
                                selectedColor: '#e6f7ff',
                                unselectedColor: '#ffffff',
                                selectedBorderColor: '#1890ff',
                                unselectedBorderColor: '#d9d9d9'
                            };
                            // 初始化多字段模式的字段值
                            newElement.settings.options.forEach(option => {
                                newElement.settings[option.fieldName] = false;
                            });
                            // 初始化选中状态
                            this.updateSelectedValues(newElement);
                            break;
                        case 'agreement-checkbox':
                            newElement.settings = {
                                fieldName: 'agreement',
                                text: '我已表示阅读并同意《用户服务及隐私协议》',
                                textColor: '#666', // 默认文本颜色
                                validation: {  // 协议验证规则
                                    required: true,
                                    message: '请阅读用户协议'
                                }
                            };
                            break;
                        case 'button':
                            newElement.settings = {
                                buttonText: '测测你能借多少',
                                buttonColor: '#1890ff',
                                buttonTextColor: '#ffffff',
                                buttonBorderRadius: 4
                            };
                            break;
                    }

                    this.formElements.push(newElement);
                    this.currentElement = newElement; // 设置为当前选中元素
                },


                // 切换单选框的值
                toggleRadioValue(element, option) {
                    if (element.settings.mode === 'single-field') {
                        // 一个字段单选模式
                        element.settings.selectedValue = option.value;
                    } else {
                        // 多字段单选模式 - 先取消所有选项
                        element.settings.options.forEach(opt => {
                            if (element.settings.hasOwnProperty(opt.fieldName)) {
                                element.settings[opt.fieldName] = false;
                            }
                        });
                        // 然后设置当前选项为选中
                        element.settings[option.fieldName] = true;
                    }
                },
                /**
                 * 处理拖拽开始事件
                 * @param {Event} e - 拖拽事件对象
                 * @param {number} index - 被拖拽元素的索引
                 */
                handleDragStart(e, index) {
                    this.draggingIndex = index; // 记录当前拖拽的索引
                    e.dataTransfer.effectAllowed = 'move'; // 设置拖拽效果
                    e.dataTransfer.setData('text/plain', index); // 设置拖拽数据
                },

                /**
                 * 处理拖拽经过事件
                 * @param {Event} e - 拖拽事件对象
                 * @param {number} index - 当前经过元素的索引
                 */
                handleDragOver(e, index) {
                    e.preventDefault(); // 阻止默认行为
                    e.dataTransfer.dropEffect = 'move'; // 设置拖拽效果
                },

                /**
                 * 处理拖拽放置事件
                 * @param {Event} e - 拖拽事件对象
                 * @param {number} targetIndex - 目标位置的索引
                 */
                handleDrop(e, targetIndex) {
                    e.preventDefault(); // 阻止默认行为
                    if (this.draggingIndex === targetIndex) return; // 相同位置不处理

                    // 移动元素到新位置
                    const movedItem = this.formElements.splice(this.draggingIndex, 1)[0];
                    this.formElements.splice(targetIndex, 0, movedItem);

                    console.log(this.formElements); // 打印最新排序

                    this.draggingIndex = null; // 重置拖拽索引
                },

                /**
                 * 处理拖拽结束事件
                 */
                handleDragEnd() {
                    this.draggingIndex = null; // 重置拖拽索引
                },

                /**
                 * 移动元素（暂未实现具体逻辑）
                 * @param {number} index - 要移动的元素索引
                 */
                moveElement(index) {
                    console.log('移动元素:', this.getElementName(this.formElements[index].type));
                },

                /**
                 * 编辑元素
                 * @param {Object} element - 要编辑的元素对象
                 */
                editElement(element) {
                    this.currentElement = element; // 设置为当前选中元素
                },

                /**
                 * 删除元素
                 * @param {number} index - 要删除的元素索引
                 */
                removeElement(index) {
                    if (confirm(`确定要删除${this.getElementName(this.formElements[index].type)}字段吗？`)) {
                        // 如果删除的是当前选中元素，则清空当前选中
                        if (this.currentElement && this.currentElement.id === this.formElements[index].id) {
                            this.currentElement = null;
                        }
                        this.formElements.splice(index, 1); // 从数组中移除
                    }
                },

                /**
                 * 处理头部图片上传
                 * @param {Event} e - 文件上传事件对象
                 */
                handleHeaderImageChange(e) {
                    let _this = this;
                    const file = e.target.files[0];
                    let formData = new FormData();
                    formData.set('file', file)

                    $.ajax({
                        method: 'POST',
                        url: '',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            if (data.status) {
                                _this.globalSettings.headerImage = data.data.url
                            } else {
                                layer.msg(data.msg || data.info)
                            }

                        }
                    })

                },

                /**
                 * 处理底部图片上传
                 * @param {Event} e - 文件上传事件对象
                 */
                handleFooterImageChange(e) {
                    let _this = this;
                    const file = e.target.files[0];
                    let formData = new FormData();
                    formData.set('file', file)

                    $.ajax({
                        method: 'POST',
                        url: '',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            if (data.status) {
                                _this.globalSettings.footerImage = data.data.url
                            } else {
                                layer.msg(data.msg || data.info)
                            }

                        }
                    })
                },

                /**
                 * 更新选项数据
                 * @param {Object} element - 要更新选项的元素对象
                 */
                updateOptions(element) {
                    if (!element.settings.optionsText) return;

                    const lines = element.settings.optionsText.split('\n');
                    element.settings.options = lines.map(line => {
                        const parts = line.split('|');
                        const option = {
                            label: parts[0] || line,
                            value: parts[1] || parts[0] || line
                        };

                        // 为多字段模式添加fieldName
                        if (element.type === 'checkbox' &&
                            element.settings.mode === 'multi-field') {
                            option.fieldName = parts[2] || 'field_' + option.value.replace(/\W+/g, '_');
                        }
                        return option;
                    });

                    // 初始化多字段模式的字段值
                    if (element.type === 'checkbox' &&
                        element.settings.mode === 'multi-field') {
                        const oldValues = element.settings.selectedValues || [];
                        element.settings.options.forEach(option => {
                            if (option.fieldName && !element.settings.hasOwnProperty(option.fieldName)) {
                                // 新选项默认不选中
                                element.settings[option.fieldName] = oldValues.includes(option.value);
                            }
                        });
                    }

                    // 更新选中状态
                    this.updateSelectedValues(element);
                },
                /**
                 * 更新多选框的选中值
                 * @param {Object} element - 要更新的元素对象
                 */
                updateSelectedValues(element) {
                    if (!element.settings.selectedValuesText) {
                        element.settings.selectedValues = [];
                        return;
                    }
                    // 分割并去除空格
                    element.settings.selectedValues = element.settings.selectedValuesText
                        .split(',')
                        .map(v => v.trim())
                        .filter(v => v); // 过滤空值

                    // 如果是多字段模式，更新各个字段的状态
                    if (element.settings.mode === 'multi-field') {
                        // 先重置所有字段为未选中
                        element.settings.options.forEach(option => {
                            if (option.fieldName) {
                                element.settings[option.fieldName] = false;
                            }
                        });
                        // 设置选中的字段
                        element.settings.selectedValues.forEach(value => {
                            const option = element.settings.options.find(opt => opt.value === value);
                            if (option && option.fieldName) {
                                element.settings[option.fieldName] = true;
                            }
                        });
                    }
                },

                /**
                 * 切换多选框的值
                 * @param {Object} element - 元素对象
                 * @param {Object} option - 选项对象
                 */
                toggleCheckboxValue(element, option) {
                    if (element.settings.mode === 'single-field') {
                        // 一个字段多选模式
                        const index = element.settings.selectedValues.indexOf(option.value);
                        if (index === -1) {
                            element.settings.selectedValues.push(option.value);
                        } else {
                            element.settings.selectedValues.splice(index, 1);
                        }
                        // 更新选中值文本
                        element.settings.selectedValuesText = element.settings.selectedValues.join(',');
                    } else {
                        // 多字段单选模式
                        element.settings[option.fieldName] = !element.settings[option.fieldName];
                        // 更新selectedValues数组
                        element.settings.selectedValues = element.settings.options
                            .filter(opt => element.settings[opt.fieldName])
                            .map(opt => opt.value);
                        element.settings.selectedValuesText = element.settings.selectedValues.join(',');
                    }

                    // 强制更新视图
                    this.$forceUpdate();
                },
                /**
                 * 切换设置面板的折叠状态
                 * @param {string} section - 要切换的面板名称
                 */
                toggleSection(section) {
                    this.sections[section].collapsed = !this.sections[section].collapsed; // 切换折叠状态
                }
            },
            created() {
                this.formElements = formDetail.formElements;
                this.globalSettings = formDetail.globalSettings;
                this.formSettings = formDetail.formSettings;
                // 初始化所有元素的options
                this.formElements.forEach(element => {
                    if (element.settings.optionsText) {
                        this.updateOptions(element); // 更新选项数据
                    }
                });
            }
        });
    </script>
</body>

</html>